<template>
    <view class="mine-container">
        <image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/mine-nav-bg.png" mode="widthFix"
            class="property-bg"></image>

        <view class="index-nav" :style="{
			background: scrollTop > 30 ? 'linear-gradient(90deg, #FD8D24 0%, #FF2E3F 100%, #FF323B 100%)' : 'transparent'
		}">
            <view class="status_bar">

            </view>
            <view class="flex items-center justify-between py-32 relative hidden">
                <image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/mine-title.png"
                    style="height: 40rpx;" mode="heightFix"></image>
                <image :src="userInfo.avatar" mode="" class="image-56 round border index-nav-avatar absolute" :style="{
					bottom: (scrollTop - 130 >= 15 ? 15 : scrollTop - 130) + 'px'
				}"></image>
                <view class="flex items-center" style="width: 40%;flex-direction: row-reverse;">
                    <!-- #ifndef MP-WEIXIN -->
                    <image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_shezhi@2x.png"
                        class="image-48 " mode="" @click="$tab.nav(`/pages/mine/setting/index`)"></image>
                    <image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_xiaoxi@2x.png"
                        class="image-48 mr-20" mode="" @click="$tab.nav(`/pages/index/notice/index`)"></image>
                    <!-- #endif -->
                    <image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/lingjinfen.gif" class="mr-20"
                        style="width: 64rpx;height: 64rpx;" mode="" @click="$tab.nav(`/pages/mine/store/storeJin`)"
                        v-if="shoreJin"></image>
                </view>
            </view>
        </view>

        <view class="">
            <view class="status_bar">

            </view>
            <view class="" style="height: 112rpx;">

            </view>
        </view>

        <view class="content px-20" style="margin-top: 40rpx;">
            <view class="flex items-center">
                <image :src="userInfo.avatar" mode="" class="image-144 round border"></image>
                <view class="ml-16" style="width: calc(100% - 200rpx);">
                    <view class="flex items-center mt-24 ">
                        <view class="text-32 font-700 text-FFF">
                            {{userInfo.nickName}}
                        </view>
						<scroll-view scroll-x style="white-space: nowrap;width: 400rpx;">
							<view class="flex items-center">
								<view class="vip ml-16 text-center text-FFF text-20 px-20" v-for="(item,index) in userInfo.levels" :key="item.levelId" :class="{
									'storeVip' : index % 2 == 0
								}">
								    {{item.levelName}}
								</view>
							</view>
						</scroll-view>
                    </view>
                    <view class="text-9E9E9E mt-16 u-line-1" v-if="userInfo.signature">
                        {{userInfo.signature}}
                    </view>
                    <view class="text-9E9E9E mt-16 u-line-1" v-else style="opacity: 0;">
                        占位
                    </view>
                </view>
            </view>

            <view class="flex justify-between items-center mt-48">
                <image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/img_jinriqiandao@2x.png"
                    class="image-144" mode="" @click="$tab.nav(`/pages/mine/signIn`)"></image>
                <image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/img_zhucefengxiang@2x.png"
                    class="image-144" mode="" @click="$tab.nav(`/pages/mine/team`)"></image>
                <!-- #ifdef APP || H5 -->
                <image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/img_zhaoshangjiamen@2x.png"
                    class="image-144" mode="" @click="$tab.nav(`/pages/mine/join`)"></image>
                <!-- #endif -->

                <image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/img_canyuxuexi@2x.png"
                    class="image-144" mode="" @click="studyValue='',studyShow=true"></image>
                <!-- #ifdef MP-WEIXIN -->
                <view class="image-144">

                </view>
                <!-- #endif -->
            </view>

            <view class="property mt-48">
                <view class="flex justify-between items-center">
                    <view class="text-32 font-700">
                        我的资产
                    </view>
                    <view class="flex items-center" @click="$tab.nav(`/pages/mine/currency/index`)">
                        <view class="">
                            全部
                        </view>
                        <u-icon name="arrow-right" :bold="true" color="#000"></u-icon>
                    </view>
                </view>
                <view class="mt-28 flex items-center justify-between">
                    <view class="bg-FFF pl-48 py-28 flex flex-col justify-between items-start round-8"
                        style="width: 324rpx;height: 144rpx;" @click="$tab.nav(`/pages/mine/currency/index?index=3`)">
                        <view class="text-40 font-700 u-line-1">
                            {{userRichInfo.balance}}
                        </view>
                        <view class="flex items-center">
                            <view class="" style="color: #8d8d8d;">
                                余额
                            </view>
                            <u-icon name="arrow-right-double" color="#8d8d8d"></u-icon>
                        </view>
                    </view>
                    <view class="bg-FFF pl-48 py-28 flex flex-col justify-between items-start round-8"
                        style="width: 324rpx;height: 144rpx;" @click="$tab.nav(`/pages/mine/currency/index?index=2`)">
                        <view class="text-40 font-700 u-line-1">
                            {{userRichInfo.jindou}}
                        </view>
                        <view class="flex items-center">
                            <view class="" style="color: #8d8d8d;">
                                金豆
                            </view>
                            <u-icon name="arrow-right-double" color="#8d8d8d"></u-icon>
                        </view>
                    </view>
                </view>

                <view class="w-full round-8 bg-FFF mt-24 py-20 flex justify-around items-center"
                    style="height: 118rpx;">
                    <view class="flex flex-col justify-between items-start" style="width: 30%;"
                        @click="$tab.nav(`/pages/mine/currency/index?index=0`)">
                        <view class="text-40 font-700 u-line-1">
                            {{userRichInfo.xiaofeijin}}
                        </view>
                        <view class="flex items-center ">
                            <view class="" style="color: #8d8d8d;">
                                消费金
                            </view>
                            <u-icon name="arrow-right-double" color="#8d8d8d"></u-icon>
                        </view>
                    </view>

                    <view class="" style="width: 4rpx;height: 46rpx;background: #8d8d8d;">

                    </view>

                    <view class="flex flex-col justify-between items-start" style="width: 30%;"
                        @click="$tab.nav(`/pages/mine/currency/index?index=1`)">
                        <view class="text-40 font-700 u-line-1">
                            {{userRichInfo.jinjifen}}
                        </view>
                        <view class="flex items-center ">
                            <view class="" style="color: #8d8d8d;">
                                金积分
                            </view>
                            <u-icon name="arrow-right-double" color="#8d8d8d"></u-icon>
                        </view>
                    </view>
                </view>
            </view>

            <view class="py-32 px-16 mt-24 round-24" style="background-color: #FAFAFA;">
                <view class="flex items-center justify-between" @click="goOrder(0)">
                    <view class="text-32 font-700">
                        我的订单
                    </view>
                    <view class="flex items-center">
                        <view class="mr-8">
                            全部
                        </view>
                        <u-icon name="arrow-right" color="#333" :bold="true"></u-icon>
                    </view>
                </view>

                <view class="flex items-center justify-between mt-24 px-20">
                    <view class="flex flex-col items-center" v-for="(item,index) in orderStatusList" :key="item.index"
                        v-if="item.icon" @click="goOrder(item.index)">
                        <view class="relative">
                            <image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages/order/${item.icon}`"
                                mode="" class="image-48"></image>
                            <view class="jiao text-FFF round text-center font-700" v-if="item.orderNum > 0">
                                {{item.orderNum}}
                            </view>
                        </view>
                        <view class="text-28 mt-20">
                            {{item.name}}
                        </view>
                    </view>
                </view>
            </view>

            <view class="py-32 px-16 mt-24 round-24" style="background-color: #FAFAFA;">
                <view class="text-32 font-700">
                    其他功能
                </view>
                <view class="mt-32 pb-20">
                    <u-grid :border="false" col="4">
                        <u-grid-item v-for="(item, index) in funList" :key="index" @click="handleFun(item)"
                            v-if="item.show">
                            <image
                                :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages/mine-fun/${item.icon}`"
                                class="image-56" />
                            <text class="grid-text mt-12">{{ item.title }}</text>
                        </u-grid-item>
                    </u-grid>
                </view>
            </view>

            <view class="flex flex-col items-center copyright text-grey mt-48" @click="handleCopyright">
                <view class="text-28">
                    版权所有：农商互融(陕西)农业科技发展有限公司
                </view>
                <view class="text-24 mt-12">
                    陕ICP备2024030015号-2A
                </view>
            </view>

            <view class="" style="height: 200rpx;">

            </view>
        </view>

        <u-popup :show="studyShow" @close="studyShow = false" :safe-area-inset-bottom="false" bgColor="transparent"
            mode="center">
            <view class="study-wrap relative">
                <view class="study-close">
                    <u-icon name="close" :bold="true" @click="studyShow = false"></u-icon>
                </view>


                <input type="text" class="study-input" placeholder="请输入兑换码" v-model="studyValue" />

                <view class="study-btn text-center text-FFF text-32" @click="studyConfirm()">
                    确认兑换
                </view>
            </view>
        </u-popup>


        <u-popup :show="redEnvelopeShow" @close="handleRedClose" mode="center" round="16" bgColor="transparent"
            :closeable="true">
            <view class="redEnvelope-wrap relative" @click="handleRedClose">
                <view class="flex flex-col items-center redEnvelope-content">
                    <view class="font-500" style="font-size: 64rpx;">
                        支付成功
                    </view>
                    <view class="redEnvelope-title font-500 mt-32">
                        恭喜您获得获得金积分
                    </view>
                    <view class="redEnvelope-price">
                        {{payStoreGetPrice}}
                    </view>
                    <image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/kai@2x.png" class="kai"
                        :class="{
						'kai-animation':redEnvelopeAnimation
					}" mode=""></image>
                </view>
            </view>
        </u-popup>

        <u-popup :show="redEnvelopeEndShow" mode="center" round="16" bgColor="transparent">
            <view class="redEnvelope-wrap-end">

            </view>
        </u-popup>


        <u-popup :show="serviceShow" mode="center" round="16" bgColor="transparent" @close="serviceShow = false">
            <view class="service-wrap bg-FFF">
                <view class="service-wrap-nav relative">
                    <view class="close" @click="serviceShow = false">
                        <u-icon name="close" :bold="true" color="#FF6E27"></u-icon>
                    </view>
                </view>
                <view class="service-wrap-content py-48 px-32 flex items-center flex-wrap justify-between">
                    <view class="flex flex-col items-center" style="width: 50%;" @click="handleGoNext(1)">
                        <image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/img_shichangkefu@2x.png"
                            mode="" class="image-96"></image>
                        <view class="text-32 mt-20">
                            市场客服
                        </view>
                    </view>
                    <view class="flex flex-col items-center" style="width: 50%;" @click="handleGoNext(2)">
                        <image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/img_jishukefu@2x.png"
                            mode="" class="image-96"></image>
                        <view class="text-32 mt-20">
                            技术客服
                        </view>
                    </view>
                    <view class="flex flex-col items-center mt-32" style="width: 50%;" @click="handleGoNext(3)">
                        <image
                            src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/img_shangjiawuliukefu@2x.png"
                            mode="" class="image-96"></image>
                        <view class="text-32 mt-20">
                            商家物流客服1
                        </view>
                    </view>
                    <view class="flex flex-col items-center mt-32" style="width: 50%;" @click="handleGoNext(4)">
                        <image
                            src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/img_shangjiawuliukefu@2x.png"
                            mode="" class="image-96"></image>
                        <view class="text-32 mt-20">
                            商家物流客服2
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>

        <Exchange :show="payStoreShow" :form="payStoreForm" @close="payStoreClose"></Exchange>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scrollTop: 0,
                orderStatusList: this.$appConfig.orderStatusList,

                funList: [{
                        title: '个人信息',
                        icon: 'icon_gerenxinxi@2x.png',
                        path: "/pages/mine/setting/userModify",
                        show: true
                    },
                    {
                        title: '我的收藏',
                        icon: 'icon_shoucang.png',
                        path: "/pages/mine/collect",
                        show: true
                    },
                    {
                        title: '我的门店',
                        icon: 'icon_wodemendian@2x.png',
                        path: "/pages/mine/store/index",
                        show: false
                    },
                    // #ifdef MP-WEIXIN
                    {
                        title: '我的资产',
                        icon: 'icon_zichan@3x.png',
                        path: "/pages/property/index",
                        show: true
                    },
                    // #endif
                    {
                        title: '分享app',
                        icon: 'icon_fenxiang.png',
                        path: "/pages/mine/qrCode",
                        show: true
                    },
                    {
                        title: '地址管理',
                        icon: 'icon_dizhiguanli@2x.png',
                        path: "/pages/mine/address/list",
                        show: true
                    },
                    {
                        title: '扫一扫',
                        icon: 'icon_saoyisao.png',
                        path: "",
                        show: true
                    },
                    {
                        title: '我的银行卡',
                        icon: 'icon_wodeyinhangka@2x.png',
                        path: "/pages/mine/bankCard/bankCard",
                        show: true
                    },
                    {
                        title: '联系客服',
                        icon: 'icon_lianxikefu@3x.png',
                        path: "",
                        show: true
                    },
                    {
                        title: '在线客服',
                        icon: 'icon_lianxikefu@2x.png',
                        path: "",
                        show: true
                    },
                    // #ifdef MP-WEIXIN
                    {
                        title: '消息',
                        icon: 'xiaoxi.png',
                        path: "/pages/index/notice/index",
                        show: true
                    },
                    {
                        title: '设置',
                        icon: 'shezhitianchong.png',
                        path: "/pages/mine/setting/index",
                        show: true
                    },
                    // #endif
                ],

                userRichInfo: {
                    balance: 0,
                    jindou: 0,
                    xiaofeijin: 0,
                    jinjifen: 0,
                },

                payStoreShow: false,
                payStoreForm: null,
                payStoreGetPrice: 0,

                studyShow: false,
                studyValue: "",

                shoreJin: false,

                redEnvelopeShow: false,
                redEnvelopeValue: [],
                redEnvalopeIndex: 1,
                redEnvelopeEndShow: false,
                redEnvelopeAnimation: false,


                serviceShow: false,
            }
        },
        computed: {
            userInfo() {
                return this.$store.state.user.userInfo
            },
        },
        onLoad(e) {
            // #ifdef MP-WEIXIN
            wx.showShareMenu({
                withShareTicket: true,
                menus: ['shareAppMessage', 'shareTimeline']
            })
            // #endif
        },
        onShareAppMessage() {

        },
        onShow() {
            this.getData()
            this.$store.dispatch('GetInfo')
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop
        },
        methods: {
            payStoreClose(jinjifen) {
                this.payStoreShow = false
                if (jinjifen) {
                    this.redEnvelopeShow = true
                    this.payStoreGetPrice = jinjifen
                }
            },
            handleGoNext(type) {
                let phone, title
                switch (type) {
                    case 1:
                        phone = '15291601551'
                        title = '市场客服'
                        break;
                    case 2:
                        phone = '15102912568'
                        title = '技术客服'
                        break;
                    case 3:
                        phone = '17792634509'
                        title = '商家物流客服1'
                        break;
                    case 4:
                        phone = '17791290326'
                        title = '商家物流客服2'
                        break;
                }
                // #ifdef APP
                plus.share.getServices(
                    res => {
                        let sweixin = null;
                        for (let i in res) {
                            if (res[i].id == 'weixin') {
                                sweixin = res[i];
                            }
                        }
                        //唤醒微信小程序
                        if (sweixin) {
                            sweixin.launchMiniProgram({
                                id: 'gh_54cde2bc9b29', //微信开放平台 --- 绑定的微信小程序的 --- 原始id
                                type: 0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
                                path: `/pages/index/index?phone=${phone}&title=${title}` //小程序的页面,用传的参数在小程序接值判断跳转指定页面
                            });
                        } else {
                            this.$modal.msg('请先安装微信!')
                        }
                    }
                );
                // #endif

                // #ifdef MP-WEIXIN
                uni.navigateToMiniProgram({
                    appId: 'wxd54ad85dbe674bcd',
                    path: `/pages/index/index?phone=${phone}&title=${title}`,
                    success(res) {
                        // 打开成功
                    }
                })
                // #endif
            },
            handleRedClose() {
                this.redEnvelopeAnimation = true
                setTimeout(() => {
                    this.redEnvelopeShow = false
                    this.redEnvelopeEndShow = true
                    this.redEnvelopeAnimation = false
                    this.redEnvalopeIndex = 2
                    setTimeout(() => {
                        this.redEnvelopeEndShow = false
                    }, 1500)
                }, 2000)
                return
                if (this.redEnvalopeIndex == 1) {
                    this.redEnvelopeAnimation = true
                    setTimeout(() => {
                        this.redEnvelopeShow = false
                        this.redEnvelopeEndShow = true
                        this.redEnvelopeAnimation = false
                        this.redEnvalopeIndex = 2
                        setTimeout(() => {
                            this.redEnvelopeEndShow = false
                            this.redEnvelopeShow = true
                        }, 1500)
                    }, 2000)
                } else {
                    this.redEnvelopeAnimation = true
                    setTimeout(() => {
                        this.redEnvelopeShow = false
                        this.redEnvelopeEndShow = true
                        this.redEnvelopeAnimation = false
                        setTimeout(() => {
                            this.redEnvelopeEndShow = false
                        }, 1500)
                    }, 2000)
                }
            },
            handleCopyright() {
                // #ifdef APP
                plus.runtime.openURL('https://beian.miit.gov.cn/')
                // #endif
            },
            async studyConfirm() {
                if (this.studyValue == "") {
                    this.$modal.msg('请输入兑换码!')
                    return
                }
                const res = await this.$Api.index.convertMoney(this.studyValue)
                this.$modal.msg('兑换成功!')
                this.studyShow = false
            },
            handleFun(item) {
                if (item.path != '') {
                    this.$tab.nav(item.path)
                    return
                }
                if (item.index) {
                    let site = getApp().globalData.config.appInfo.agreements[item.index]
                    this.$tab.nav(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
                    return
                }
                switch (item.title) {
                    case "扫一扫":
                        uni.scanCode({
                            scanType: ['qrCode'],
                            success: (res) => {
                                let url = res.result
                                if (url.indexOf('https://d.fulewanjia.com') == 0) {
                                    console.log(res.result)
                                    let tem = url.split('&')
                                    this.payStoreForm = {
                                        inviteCode: tem[0].split('?')[1],
                                        name: tem[1].split('=')[1],
                                        rate: tem[2].split('=')[1],
                                        // #ifdef APP
                                        payWay: 2,
                                        // #endif
                                        // #ifdef MP-WEIXIN
                                        payWay: 0,
                                        // #endif
                                        price: "",
                                        divideType: 1,
                                        storeName: tem[3].split('=')[1],
                                        openBalancePay: tem[4].split('=')[1],
                                    }
                                    this.payStoreShow = true

                                } else {
                                    this.$modal.msg('暂不支持此APP外的其他二维码!')
                                }
                            }
                        })
                        break
                    case "联系客服":
                        uni.makePhoneCall({
                            phoneNumber: '17792634509' //仅为示例
                        });
                        break
                    case "在线客服":
                        this.serviceShow = true
                        break
                    default:
                        this.$modal.msg('功能尚在开放中!')
                }
            },
            goOrder(index) {
                this.$tab.nav(`/pages/mine/order/orderList?index=${index}`)
            },
            async getData() {
                const userRichInfo = await this.$Api.user.userRichInfo()
                userRichInfo.data.forEach(item => {
                    switch (item.moneyName) {
                        case "余额":
                            this.userRichInfo.balance = item.amount
                            break
                        case "金豆":
                            this.userRichInfo.jindou = item.amount
                            break
                        case "消费金":
                            this.userRichInfo.xiaofeijin = item.amount
                            break
                        case "金积分":
                            this.userRichInfo.jinjifen = item.amount
                            break
                    }
                })


                const store = await this.$Api.store.appgetstores()
                if (store.data) {
                    this.shoreJin = true
                }

                if (store.data && this.userInfo.storeZfbOpenId) {
                    this.funList[2].show = true
                }

                const userOrderstatistics = await this.$Api.index.userOrderstatistics()

                this.orderStatusList[1].orderNum = userOrderstatistics.noPay
                this.orderStatusList[2].orderNum = userOrderstatistics.noSend
                this.orderStatusList[3].orderNum = userOrderstatistics.noTake
                this.orderStatusList[5].orderNum = userOrderstatistics.finished

            }
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #FFF;
    }
    
    .index-nav-avatar{
        left: 50%;
        transform: translateX(-50%);
    }

    .service-wrap {
        border-radius: 44rpx;

        .service-wrap-nav {
            width: 560rpx;
            height: 148rpx;
            background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/img_zaixiankefu@2x.png) no-repeat;
            background-size: 100% 100%;

            .close {
                position: absolute;
                right: 32rpx;
                top: 32rpx;
            }
        }

        .service-wrap-content {
            width: 560rpx;
        }
    }

    .property-bg {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }

    .index-nav {
        width: 100%;
        padding: 0rpx 32rpx 0 32rpx;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 9;

        .index-title {
            width: 112rpx;
            height: 40rpx;
        }

        .index-xiaoxi {
            width: 48rpx;
            height: 48rpx;
        }

    }

    .content {
        position: relative;
        z-index: 2;
        width: 100%;

        .vip {
            background-size: 100% 100%;
            background: linear-gradient(to right, #56A3FC, #E156FD);
            padding-top: 8rpx;
            padding-bottom: 8rpx;
            border-radius: 0 16rpx 0 16rpx;
        }

        .storeVip {
            background: linear-gradient(to right, #A9EA47, #42DAD0);
        }

        .property {
            background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/mine-property-bg1@2x.png') no-repeat;
            background-size: 100% 100%;
            padding: 32rpx 16rpx 28rpx 16rpx;
        }
    }

    /deep/ .u-grid-item {
        margin-top: 32rpx !important;
    }

    .jiao {
        background: #FF0F0F;
        width: 32rpx;
        height: 32rpx;
        line-height: 32rpx;
        position: absolute;
        right: -16rpx;
        top: -6rpx;
        z-index: 1;
        font-size: 20rpx;
    }

    .redEnvelope-wrap {
        width: 628rpx;
        height: 880rpx;
        background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/image_hongbao@2x.png) no-repeat;
        background-size: 100% 100%;
        padding: 116rpx 0 22rpx 0;
        color: #E9CA9A;
        animation: fadeIn 1.5s forwards;

        .redEnvelope-price {
            font-size: 100rpx;
            font-weight: 700;
            margin-top: 78rpx;
        }

        .kai {
            width: 148rpx;
            height: 148rpx;
            position: absolute;
            left: calc(50% - 74rpx);
            bottom: 158rpx;
        }

        .kai-animation {
            animation: float 2s forwards;
            transform-style: preserve-3d;
        }
    }

    .redEnvelope-wrap-end {
        width: 750rpx;
        height: 750rpx;
        background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/image_linquchenggong@3x.png) no-repeat;
        background-size: 100% 100%;
    }

    @keyframes float {
        from {
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        }

        to {
            transform: rotateX(0deg) rotateY(720deg) rotateZ(0deg);
        }
    }

    /* 定义关键帧 */
    @keyframes fadeIn {
        from {
            right: -72rpx;
        }

        to {
            right: 0rpx;
        }
    }


    .study-wrap {
        width: 666rpx;
        height: 560rpx;
        background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/img_canyuxuexi@2x.png) no-repeat;
        background-size: 100% 100%;
        padding: 236rpx 36rpx 0 36rpx;

        .study-input {
            width: 594rpx;
            height: 92rpx;
            background: #F8F8F8;
            border-radius: 16rpx 16rpx 16rpx 16rpx;
            line-height: 92rpx;
            text-align: center;
        }

        .study-btn {
            width: 594rpx;
            height: 92rpx;
            background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
            border-radius: 152rpx 152rpx 152rpx 152rpx;
            line-height: 92rpx;
            margin-top: 88rpx;
        }

        .study-close {
            position: absolute;
            right: 44rpx;
            top: 120rpx;
        }
    }
</style>